<template>
  <div class="yongHu_container" v-loading="loading">
    <div class="yongHu_container_top">
      <div class="yongHu_container_top_img">
        <el-image :src="useInfo.profile.avatarUrl" />
      </div>
      <div class="yongHu_container_top_right">
        <div class="yongHu_container_top_right_name">
          {{ useInfo.profile.nickname }}
        </div>
        <div class="yongHu_container_top_right_lvAndSex">
          <div class="yongHu_container_top_right_lv">
            Lv:{{ useInfo.level }}
          </div>
          <div v-if="this.useInfo.profile.gender == 0">保密</div>
          <img
            v-else-if="this.useInfo.profile.gender == 1"
            src="../../../assets/nan.png"
          />
          <img v-else src="../../../assets/nv.png" />
        </div>
        <div class="yongHu_container_top_right_flex">
          <div
            @click="
              jumpEventCount(useInfo.profile.userId, useInfo.profile.nickname)
            "
            style="width: 40px"
            class="yongHu_container_top_right_flex_inside"
          >
            <div class="number">{{ useInfo.profile.eventCount }}</div>
            <div class="fuTitle">动态</div>
          </div>
          <div
            @click="
              jumpfollows(useInfo.profile.userId, 0, useInfo.profile.nickname)
            "
            style="width: 100px"
            class="yongHu_container_top_right_flex_inside"
          >
            <div class="number">{{ useInfo.profile.follows }}</div>
            <div class="fuTitle">关注</div>
          </div>
          <div
            @click="
              jumpfollows(useInfo.profile.userId, 1, useInfo.profile.nickname)
            "
            style="width: 40px"
            class="yongHu_container_top_right_flex_inside"
          >
            <div class="number">{{ useInfo.profile.followeds }}</div>
            <div class="fuTitle">粉丝</div>
          </div>
        </div>
        <div class="yongHu_container_top_right_area">
          <div style="margin-right: 5px">所在地区:</div>
          <div style="color: #909399; font-weight: 200; margin-right: 5px">
            广东省
          </div>
          <div style="color: #909399; font-weight: 200">广州市</div>
        </div>
        <div class="yongHu_container_top_right_area">
          <div style="margin-right: 5px">社交网络:</div>
          <div style="color: #909399; font-weight: 200">未绑定</div>
        </div>
        <div class="yongHu_container_top_right_area">
          <div style="margin-right: 5px">个人介绍:</div>
          <div v-if="useInfo.profile.signature == ''">无</div>
          <div
            v-else
            style="
              width: 450px;
              color: #909399;
              font-weight: 200;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ useInfo.profile.signature }}
          </div>
        </div>
      </div>
    </div>
    <div class="yongHu_container_bottom">
      <div class="yongHu_container_bottom_title">
        歌单
        <span style="font-size:13px;color:rgb(144, 147, 153);margin-left:5px;"
          >({{ playlist.length }})</span
        >
      </div>
      <div class="yongHu_container_bottom_contact">
        <div
          class="yongHu_container_bottom_contact_inside"
          v-for="item in playlist"
          :key="item.id"
          @click="jumpGeDan(item.id)"
        >
          <div class="yongHu_container_bottom_contact_inside_img">
            <el-image :src="item.coverImgUrl" lazy />
          </div>
          <div class="yongHu_container_bottom_contact_inside_title">
            {{ item.name }}
          </div>
          <div class="yongHu_container_bottom_contact_inside_song">
            {{ item.trackCount }}首
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userDetail, userPlaylist } from "../../../api/index";
export default {
  created() {
    this.loading = true;
    userDetail({ uid: this.$route.query.id }).then((res) => {
      //console.log(res);
      this.useInfo = res;
      userPlaylist({ uid: this.$route.query.id }).then((res) => {
        console.log(res);
        this.playlist = res.playlist;
        this.loading = false;
      });
    });
  },
  data() {
    return {
      playlist: [],
      loading: false,
      useInfo: { profile: { avatarUrl: "" } },
    };
  },
  methods: {
    jumpfollows(id, status, name) {
      this.$router.push({
        path: "/userFolloweds",
        query: {
          id,
          status,
          name,
        },
      });
    },
    jumpEventCount(id, name) {
      this.$router.push({
        path: "/dongTai",
        query: {
          id,
          name,
        },
      });
    },
    jumpGeDan(id){
      this.$router.push({
        path: "/geDanInfo",
        query: {
          id
        },
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../../common/css/commonStyle";
.yongHu_container {
  width: 95%;
  padding-top: 30px;
  .yongHu_container_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .yongHu_container_top_img {
      width: 200px;
      height: 200px;
      // background: red;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .yongHu_container_top_right {
      width: 70%;
      .yongHu_container_top_right_name {
        font-size: 25px;
        font-weight: 900;
        margin-bottom: 10px;
      }
      .yongHu_container_top_right_lvAndSex {
        justify-content: space-between;
        width: 80px;
        display: flex;
        font-size: 12px;
        align-items: center;
        margin-bottom: 10px;
        .yongHu_container_top_right_lv {
          width: 40px;
          height: 25px;
          border-radius: 20px;
          background: rgb(224, 224, 224);
          @include flex;
        }
      }
      .yongHu_container_top_right_flex {
        display: flex;
        margin-bottom: 10px;
        .yongHu_container_top_right_flex_inside {
          cursor: pointer;
          height: 60px;
          // background: chocolate;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          .number {
            font-size: 25px;
            font-weight: 500;
          }
          .fuTitle {
            font-size: 14px;
            font-weight: 100;
          }
        }
      }
      .yongHu_container_top_right_area {
        display: flex;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
  }
  .yongHu_container_bottom {
    display: flex;
    align-items: center;
    flex-direction: column;
    .yongHu_container_bottom_title {
      width: 95%;
      font-weight: 800;
      font-size: 20px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }
    .yongHu_container_bottom_contact {
      width: 95%;
      display: flex;
      flex-wrap: wrap;
      .yongHu_container_bottom_contact_inside {
        width: 25%;
        margin-bottom: 15px;
        cursor: pointer;
        .yongHu_container_bottom_contact_inside_img {
          width: 90%;
          height: 170px;
          margin-bottom: 10px;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }
        .yongHu_container_bottom_contact_inside_title {
          width: 90%;
          font-weight: 100;
          font-size: 15px;
          margin-bottom: 10px;
        }
        .yongHu_container_bottom_contact_inside_song {
          font-size: 13px;
          color: rgb(144, 147, 153);
        }
      }
    }
  }
}
</style>
